<template>
<div>
   <Header activeClass="2" @xslxwm="xslxwm"></Header>
<div class="wid" id="apilbox">
<div id="apileft">
	<h2>参考文档</h2>
	<ul>

		<!-- <li>
			<a href="javascript:;" id="iclass1">天气编码</a>
			<a href="javascript:;" id="iclass2">城市编码</a>
		</li> -->

		 <!-- 分类 -->
          <li>
           <a v-for="item in categories" :key="item.id"   @click="showList(item.id,item.name)" href="javascript:;" :id="'iclass'+item.id" :class="{ on:changeRed == item.id}" > {{ item.name }}
            <span></span>
            </a>
          </li>

	</ul>
</div>

<div id="apiright">
			<div id="topcrumb" class="wid"><a href="">首页</a> <span></span> 参考文档<span></span>{{xzname}}</div>
    <div id="apiileft">
      <div id="apicontent">
        <div id="apitab">
          <ul>
            <li><a href="javascript:;" class="on">参考文档</a></li>
          </ul>
          <div class="clearfix"></div>
        </div>


        <div id="apibox">
          <div id="apimain" style="display: block;">
            <div id="apibright">
              <div class="subapiitem" style="display: block;">
                <div class="subapiinfo">
                  <div class="apilinebox">


                    <table v-if="changeRed==2">
                      <tbody>
                        <tr>
                          <th class="col1">天气编码</th>
                          <th class="col2">天气文本</th>
						  <th class="col2">图标</th>
						  <th class="col2">Code</th>
                        </tr>

			

                          	<tr v-for="item in categories1" :key="item.id" >
                          		<td>{{ item.code }}</td>
                          		<td>{{ item.text }}</td>
								<td><img :src="item.icon" style="width: 40px;height:40px;"></td>
								<td>{{ item.heCode }}</td>
                        	</tr>
                          
                      </tbody>
                    </table>




<div  v-if="changeRed==1">
	 <div class="searchBox">
      <el-input prefix-icon="iconfont icon-sousuo" v-model.trim="searchTableInfo" placeholder="请输入搜索内容" style="width:240px"></el-input>
    </div>

	<el-table
      :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
      :empty-text="emptyt"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%;margin: 10px 0;text-align:left;">


	  <el-table-column
        prop="areaId"
        align="left"
        label="区域编码"
        min-width="20%" >
      </el-table-column>

	  <el-table-column
        prop="nameEn"
        align="left"
        label="英文"
        min-width="20%">
      </el-table-column>

      <el-table-column
        prop="name"
        align="left"
        label="中文"
        min-width="20%">
      </el-table-column>

      <el-table-column
        prop="city"
        align="left"
        label="城市"
        min-width="20%">
      </el-table-column>


      <el-table-column
        prop="province"
        align="left"
        label="省份"
        min-width="20%">
      </el-table-column>

    </el-table>
    <!--分页-->
    <el-pagination
      center
      background
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[10,20,50,100]"
      :page-size="pagesize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>


</div>
					<!-- <tbody  v-if="changeRed==2">
                        <tr>
                          <th class="col1">区域编码</th>
                          <th class="col2">英文</th>
                          <th class="col2">中文</th>
                          <th class="col2">城市</th>
                          <th class="col2">省份</th>

						   </tr>


                            <tr v-for="item in categories2" :key="item.id" >
                          		<td>{{ item.areaId }}</td>
                          		<td>{{ item.nameEn }}</td>
								<td>{{ item.name }}</td>
								<td>{{ item.city }}</td>
								<td>{{ item.province }}</td>
                        	</tr>

                    </tbody> -->



                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>


      </div>
    </div>
		</div>
	</div>
    <div class="clearfix"></div>
  

   <Footer :khxs="khxs" :lxwm="lxwm"  @xslxwm="xslxwm"  @gblxwm="gblxwm"></Footer>
</div>
 
</template>
  
<script>
import Header from '../common/Header';
import Footer from '../common/Footer';

export default {
  name: "Doc",
  components: {Header, Footer},
  data() {
    return {
          lxwm:false,
      emptyt:"加载中...",
		searchTableInfo:"",
        pagesize: 20,
        currpage: 1,
    getSearchInfo:[],
    khxs:false,
		
      cont: false,
	  sq: false,
	  changeRed:1,
	  xzname:"城市编码",
	  categories1:[],
	  categories2:[],
      categories: [
        {
			id: "1",
			name: "城市编码",
			serviceNum: 1
		  },
		  {
			id: "2",
			name: "天气编码",
			serviceNum: 2
		  }
		  
	   ]
    };
  },
  mounted: function() {
    this.initNav();
  },
    created(){
      this.info();
	},
	
	   computed: {
      // 根据计算属性模糊搜索
      tableData () {
        const searchTableInfo = this.searchTableInfo
        if (searchTableInfo) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.getSearchInfo.filter(data => {
            console.log("success"+data)
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
            })
          })
        }
        return this.getSearchInfo
      }
	},
	
  methods: {
    gblxwm: function() {
      this.lxwm = false;
    },
    xslxwm: function() {
        console.log(1232132132);

        this.lxwm = true;
    },
	   handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
      //操作多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //获取信息
      info(){
      

      //这些数据视情况，是你从后端拿来的。
    
	  },
	  




	initNav() {
		this.list(1);
    },
	  
    // 选择分类
    showList:function(id,name){
      this.changeRed = id;
	  this.cont = false;
	  this.xzname = name;
      this.list(id);
	},
	
    // 获取列表
    list(id) {
      
	  let _this = this;
	  if(id == 1){
        var  Data = "";

		   _this.$http({
          url: 'index/findAreaCodeByPaging?pageNum=1&pageSize=100000',
          method: 'get'
        }).then(res => {
          console.log(res.data);
          Data= res.data.datas.rows;
          
          _this.getSearchInfo = Data;
          console.log(_this.getSearchInfo)
        })


		
	  }else{

     	_this.$http({
				url: 'index/findWeatherCodeByPaging?pageNum=1&pageSize=10000',
				method: 'get'
			}).then(res => {
				console.log(res.data);
				_this.categories1 = res.data.datas.rows;
			})


	  }

     
	  
	},
	

    showCont: function() {
      this.cont = true;
    },

    showsq: function() {
      this.sq = true;
    },

    gbsq: function() {
      this.sq = false;
    },

   


  }
};
</script>
<style lang="less" scoped>
.sq_box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.labelRight {
  display: inline-block;
  margin: 0 0 0 10px;
}
.userLabelRadio {
  margin-right: 10px;
}
#addapi .inputDiv .label_number {
  width: 220px;
}
.label_number_text {
  margin-left: 10px;
}
.label_test_text {
  color: #fe514a;
  font-size: 14px;
  display: none;
}
.label_commercial {
  position: relative;
}
.label_commercial em {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 180px;
  height: 38px;
  padding: 0 10px;
  background: #ffffff;
  color: rgb(102, 102, 102);
  font-style: normal;
  line-height: 40px;
}
.el-pagination__sizes{margin-left: 10px !important;}
.el-pagination {
    white-space: nowrap;
    padding: 2px 0px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0 0 0;
}
</style>